<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <li v-for="item,index in list" :key="index">{{ item }}---{{ index }}</li>
        <li v-for="item,index of list">{{ item }}---{{ index }}</li>
        <li v-for="value,key,index in obj">{{ key }}---{{ value }}-----{{ index }}</li>
        <li v-for="value,key,index of obj">{{ key }}---{{ value }}-----{{ index }}</li>        
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                list: [1,2,3,4],
                obj:{
                    name:"aa",
                    age:20
                }
            },
            methods: {

            }
        })
    </script>

    <!--    原生JS渲染：每一次操作都要通过先读取html文件到内存中，然后再到cpu进行计算，最后渲染出来，用的时间比较长
            虚拟DOM：实际上就是将html文件变成一个JS对象，里面包括各种属性，他的标签名和他的子元素。这个js对象就叫做虚拟DOM，然后把这个JS对象放到内存里，
            cpu就可以一次性渲染出结果。如果要进行修改操作，也是先生成一个新的JS对象，把它放到内存里跟就的进行比较，替换掉旧的，重新渲染一次出来。
            在更新中，用到key值用来检测每一个节点的身份，从而提高更新的效率 -->

    <!-- 原生js中遍历数组的方法：forEach for of
    遍历对象的方法: for in -->
</body>
</html>